<template>
  <page-layout>
    <!-- 中心区域 -->
    <a-col :span="24">
      <a-card>
        <a-button type="primary" class="editable-add-btn" @click="handleAdd">新增</a-button>
        <!-- 列表 -->
        <a-table bordered :columns="columns" :data-source="dataSource" :pagination="pagination" rowKey="id" ref="tableRef">
          <template v-for="col in ['jdysmc', 'jdtype', 'kcdw', 'sjdw', 'jldw', 'sgdw', 'sbshang', 'yxgldw', 'zljdjg', 'yssj']" #[col]="{ text, record }" :key="col">
            <div>
              <template  v-if="editableData[record.id] && ['jdysmc', 'jdtype', 'kcdw', 'sjdw', 'jldw', 'sgdw', 'sbshang', 'yxgldw', 'zljdjg'].includes(col)">
                <a-input v-model:value="editableData[record.id][col]" style="margin: -5px 0" />
              </template>
              <template v-else-if="editableData[record.id] && ['yssj'].includes(col)">
                <a-date-picker v-model:value="editableData[record.id][col]" valueFormat="YYYY-MM-DD" style="width: 110px;"/>
              </template>
              <template v-else-if="editableData[record.id] && ['fujian'].includes(col)">
                <a-upload action="http://localhost:9292/api/sys/oss/upload" :multiple="false">
                  <a-button type="primary" size="small">
                    <upload-outlined></upload-outlined>
                    上传
                  </a-button>
                </a-upload>
                <a-input v-model:value="editableData[record.id][col]" :hidden="true" id="fujian" name="fujian"/>
              </template>
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>

          <template #operation="{ record }">
            <div style="width: 100px;">
              <span class="editable-row-operations">
                <span v-if="editableData[record.id]">
                  <a @click="baocun(record.id)">保存</a>
                  <a-popconfirm title="确定取消吗？" @confirm="cancel(record.id)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="edit(record.id)">编辑</a>
                </span>
              </span>
              <a-popconfirm
                v-if="dataSource.length"
                title="确定删除吗？"
                @confirm="onDelete(record.id)"
              >
                <a>删除</a>
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </a-card>
    </a-col>
  </page-layout>
</template>
<script>
import {reactive, ref, toRaw} from 'vue';
import {page, remove, save} from '@/api/module/xmys_jdys';
import {cloneDeep} from "lodash-es";
import {message} from "ant-design-vue";
import { v4 as uuidv4 } from "uuid";
import global from '../global/global';

const removeKey = "remove";

export default {
  setup(){
    const tableRef = ref();
    const editableData = reactive({});

    /// 列配置
    const columns = [
      { dataIndex: "jdysmc", key: "jdysmc", title: "阶段验收名称", slots: {customRender: 'jdysmc'}},
      { dataIndex: "jdtype", key: "jdtype", title: "阶段验收类型", slots: {customRender: 'jdtype'}},
      { dataIndex: "kcdw", key: "kcdw", title: "勘测单位", slots: {customRender: 'kcdw'}},
      { dataIndex: "sjdw", key: "sjdw", title: "设计单位", slots: {customRender: 'sjdw'}},
      { dataIndex: "jldw", key: "jldw", title: "监理单位", slots: {customRender: 'jldw'}},
      { dataIndex: "sgdw", key: "sgdw", title: "施工单位", slots: {customRender: 'sgdw'}},
      { dataIndex: "sbshang", key: "sbshang", title: "主要设备制造/供应商", slots: {customRender: 'sbshang'}},
      { dataIndex: "yxgldw", key: "yxgldw", title: "运行管理单位", slots: {customRender: 'yxgldw'}},
      { dataIndex: "zljdjg", key: "zljdjg", title: "质量监督机构", slots: {customRender: 'zljdjg'}},
      { dataIndex: "yssj", key: "yssj", title: "验收时间", slots: {customRender: 'yssj'}},
      /*{ dataIndex: "yszl", key: "yszl", title: "验收资料"},*/
      { key: 'operation', title: '操作', width: 100, slots: {customRender: 'operation'}},
    ]

    const dataSource = ref([]);
    page({"xmid": global.xmid}).then((response) => {
      dataSource.value = response.data.record;
    });

    /// 分页参数
    const pagination = {
      pageNum: 1,
      pageSize: 10,
    }

    const handleAdd = () => {
      let random = uuidv4().replaceAll("-", "");
      let xmid = global.xmid;
      const addData = {
        id: random,
        xmid: xmid,
        jdysmc: '',
        jdtype: '',
        kcdw: '',
        sjdw: '',
        jldw: '',
        sgdw: '',
        sbshang: '',
        yxgldw: '',
        zljdjg: '',
        yssj: '',
      };
      dataSource.value.push(addData);
      edit(random);
    };

    const cancel = key => {
      delete editableData[key];
    };

    const onDelete = key => {
      dataSource.value = dataSource.value.filter(item => item.id !== key);
      remove({"id": key}).then((response) => {
        if(response.success){
          message.success({content: "删除成功", key: removeKey, duration: 1})
        } else {
          message.error({content: "删除失败", key: removeKey, duration: 1})
        }
      })
    };

    const edit = key => {
      editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.id)[0]);
    };
    const baocun = key => {
      Object.assign(dataSource.value.filter(item => key === item.id)[0], editableData[key]);
      save(toRaw(editableData[key])).then((response) => {
        if(response.success){
          message.success({ content: '提交成功', duration: 1 })
        }else{
          message.error({ content: '提交失败', duration: 1 })
        }
      }).catch(error => {
        console.log('error', error);
      });

      delete editableData[key];
    };

    return {
      tableRef,

      columns,
      dataSource,
      pagination,

      handleAdd,
      onDelete,
      edit,
      baocun,
      editableData,
      cancel,
    }
  }
}
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
